<template>
	<view class="goodscontent">
		<!-- 分类列表 -->
		<page-head :transparent='false' :fixed="true">
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<view slot="bottom">
				<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
					<view v-for="(cate, index) in categories" :key="index" :data-cid="cate.cid" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
					 @click="tabChange($event)">
						{{ cate.cname }}
					</view>
				</scroll-view>

				<order-list :orderList="sortList" :activeIndex="activeIndex" :currentIndex="sortIndex" @selectChange="sortChange"></order-list>
			</view>
		</page-head>
		<!-- 商品列表 -->
		<jd-goods-list :goodsList="goodsList" :loadingText="loadingText" @eventClick="toDetail($event)" :platform="platform"></jd-goods-list>
	</view>
</template>

<script>
	import JdGoodsList from '@/components/jd-goods-list.vue';
	import orderList from '../../components/order/order-list.vue';
	
	let page = 1,
		cate = 0,
		sort = 0,
		orderby = 1,
		seller = '',
		urlName = '',
		sellerId = 0;

	export default {
		components: {
			orderList,
			JdGoodsList
		},
		data() {
			return {
				title: '',
				//分类信息
				categories: [],
				// 当前选择的分类
				cateCurrentIndex: 0,
				//筛选分类
				sortList: [{
						id: 0,
						name: '人气',
						img: false
					},
					{
						id: 1,
						name: '销量',
						img: false
					},
					{
						id: 2,
						name: '价格',
						img: true,
						order: 0
					},
					{
						id: 3,
						name: '抵扣金额',
						img: true,
						order: 0
					}
				],
				//当前选择的筛选分类
				sortIndex: 0,
				activeIndex: 0,
				loadingText: '加载中...',
				goodsList: [],
				platform: ''
			};
		},
		onLoad(event) {
			this.initData();
			seller = event.title;
			sellerId = event.cat_id;
			this.title = seller;
			this.platform = seller;
			if (sellerId == '1') {
				urlName = 'jd';
				console.log(1)
			} else if (sellerId == '11') {
				urlName = 'pdd';
				console.log(2)
			} else {
				urlName = 'pdd';
				console.log(3)
			}
			if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token !=
				'undefined') {
				uni.setStorageSync('token', decodeURI(event.token));
				uni.setStorageSync('bump', event.bump);
				uni.setStorageSync('relationId', event.relationId);
				uni.setStorageSync('mobile', event.customerId);
			}

			this.setNavigation(seller);
			this.genCategory();
			this.getGoodsList();
			this.setNa();
		},
		onReachBottom: function() {
			this.getGoodsList();
		},
		onPullDownRefresh: function() {
			this.goodsList = [];
			page = 1;
			this.loadingText = '加载中...';
			this.getGoodsList();
		},
		methods: {
			setNa() {
				callNative('showSearchIcon', {
					searchLink: this.$httpUrl + 'pages/search/search'
				})
			},
			initData() {
				page = 1;
				cate = 0;
				sort = 0;
				orderby = 1;
				seller = '';
				urlName = '';
			},
			setNavigation(title) {
				this.title = title;
				uni.setNavigationBarTitle({
					title: title
				});
			},
			sortChange: function(e) {
				this.loadingText = '加载中...';
				sort = e.id;
				console.log("sort===" + sort);
				this.sortIndex = sort;
				if (sort >= 2) {
					if (orderby == 0 || orderby == 2) {
						orderby = 1;
						this.activeIndex = 1;
					} else {
						orderby = 2;
						this.activeIndex = 2;
					}
				} else {
					orderby = 0;
					this.activeIndex = 0;
				}
				page = 1;
				this.goodsList = [];
				this.getGoodsList();
			},
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cid;
				this.cateCurrentIndex = index;
				// 动态替换内容
				this.content = this.categories[index].name;

				// 读取分类数据
				cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据
				page = 1;
				this.loadingText = '加载中...';
				this.goodsList = [];
				console.log("cateid==" + cateid);
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				this.getGoodsList();
			},
			async genCategory() {
				try {
					let res = await this.$request.post('/coupon-product/' + urlName + '/goods/cname', {});
					let datas = res.data;
					let allCate = [{
						cname: '全部',
						cid: ''
					}];
					this.categories = allCate.concat(datas.data);
				} catch (e) {
					console.log(e);
				}
			},
			async getGoodsList() {
				try {
					uni.showLoading({
						title: 'loading...',
						mask: true
					});
					this.loadingText = '加载中...';
					let sortby = 'desc';
					let sortField = 'lftime';
					if (sellerId == 1) {
						sortby = orderby == 1 ? 'desc' : 'asc'
						if (sort == 0) {
							sortField = '0';
							sortby = 'desc';
						} else if (sort == 1) {
							sortField = '4';
							sortby = 'desc';
						} else if (sort == 2) {
							sortField = '1';
						} else if (sort == 3) {
							sortField = '5';
						} else {
							sortField = '0';
							sortby = 'desc';
						}
					} else {
						if (sort == 0) {
							sortField = '16';
						} else if (sort == 1) {
							sortField = '6';
						} else if (sort == 2) {
							sortField = orderby == 1 ? '10' : '9';
						} else if (sort == 3) {
							sortField = orderby == 1 ? '8' : '7';
						} else {
							sortField = '16';
						}
					}

					let data = {
						cid: cate,
						page: page,
						sort: sortField,
						sortby: sortby,
						pagesize: 20,
						iscoupon: 1
					};
					let res = await this.$request.post('/coupon-product/' + urlName + '/goods/list', {
						data: data
					});
					let datas = res.data;
					let newList = datas.data;
					if (newList != '' && newList.length > 0) {
						this.goodsList = this.goodsList.concat(newList);
						page++;
						if (page == 500 || newList.length < 20) {
							this.loadingText = '没有更多了';
						}
					} else {
						this.loadingText = '没有更多了';
					}
					uni.hideLoading();
				} catch (e) {
					uni.hideLoading();
					console.log(e);
					this.loadingText = '没有更多了';
				}
			},
			toDetail(e) {
				h5NavigateTo({
					url: '../detail/detail?skuId=' + e.skuId + '&cid=' + e.cid + '&title=' + e.skuName + '&seller=' + sellerId
				});
				/* h5NavigateTo({
					url: '../detail/detail?skuId=' + e.skuId + '&cid=0' + '&title=' + e.skuName + '&seller=' + sellerId
				}); */
			}
		}
	};
</script>

<style lang="scss">
	@import '@/common/css/goods-list.scss';

	.sort-box {
		width: 100%;
		min-width: 750px;
	}

	.category-row {
		width: 100%;
		height: 80px;
		line-height: 80px;
		display: inline-flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		background-color: aquamarine;

		.category-scroll {
			height: 60px;
			line-height: 60px;
			display: inline-flex;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;

			.scroll-view-item {
				width: 80px;
				height: 60px;
			}
		}
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}

	.page-title-row {
		width: 100%;
		height: 80px;
		background-color: red;
		display: flex;

		.back-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60px;
			height: 75px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.page-title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-weight: 300;
				color: white;
			}
		}
	}

	.header-row {
		//width: 100%;
		width: 750px;
		height: 60px;
		background-image: url('../../static/img/search/list.png');
		background-repeat: no-repeat;
		background-size: cover;

		.header-line {
			width: 100%;
			height: 60px;
			display: inline-flex;
			justify-content: flex-start;
			font-size: 30px;
			align-items: center;

			.header-range {
				width: 30%;
				height: 60px;
				justify-content: space-between;

				image {
					width: 20px;
					height: 15px;
				}

				padding-left: 10%;
			}

			.hearder-rate {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}

			.header-price {
				width: 30%;
				height: 60px;

				image {
					width: 20px;
					height: 15px;
				}
			}
		}
	}
</style>
